<%@ page pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/common/taglibs-include.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>新增用户</title>
<link href="<c:url value="/assets/global/plugins/bootstrap-dialog/css/bootstrap-dialog.css"/>" rel="stylesheet" type="text/css">
    <script type="application/javascript" src="<c:url value="/assets/global/plugins/bootstrap-dialog/js/bootstrap-dialog.js"/>"></script>
<script type="application/javascript" src="<c:url value="/assets/global/plugins/jquery.page.js"/>"></script>
 <script type="text/javascript" src="<c:url value="/assets/global/plugins/jquery-validation/js/jquery.validate.min.js"/>"></script>
 <script type="text/javascript" src="<c:url value="/assets/global/plugins/jquery-validation/js/additional-methods.min.js"/>"></script>
<script>
	$(function() {

		bindValidate();

		$("#okBtn").click(function() {
			if ($("#addForm").valid()) {
				$.post("<c:url value='/user/fsUser/add.do'/>", $("#addForm").serialize(), function(resp) {
					BootstrapDialog.alert({
                        title: '系统操作提示!',
                        message: resp.msg,
                        closable: false,
                        type: (resp.status == '0' ? BootstrapDialog.TYPE_SUCCESS : BootstrapDialog.TYPE_DANGER),
                        size: BootstrapDialog.SIZE_SMALL,
                        buttonLabel: '确 认',
                        callback: function () {
                            if (resp.status == '0')  location.href = "<c:url value='/user/fsUser/initQuery.do?keepSP=Y'/>";
                        }
                    });
				}, 'json');
			}
		});

	});
	
	function bindValidate() {
		jQuery.validator.addMethod("isExists", function(val, element) {
			var isExistsFlag = false;
			$.ajaxSetup({
				async : false
			});
			$.post("<c:url value='/user/fsUser/checkNameUnique.do'/>", $(
					"#addForm").serialize(), function(resp) {
				isExistsFlag = resp;
			}, 'json');
			// 恢复异步
			$.ajaxSetup({
				async : true
			});
			return isExistsFlag;
		});

		jQuery.validator.addMethod("phoneExists", function(val, element) {
			var isExistsFlag = false;
			$.ajaxSetup({
				async : false
			});
			$.post("<c:url value='/user/fsUser/checkPhoneUnique.do'/>", $(
					"#addForm").serialize(), function(resp) {
				isExistsFlag = resp;
			}, 'json');
			// 恢复异步
			$.ajaxSetup({
				async : true
			});
			return isExistsFlag;
		});
		
		jQuery.validator.addMethod("rpass", function(val, element) {
			return $("#password").val() == $("#rpassword").val();
		})

		return $('#addForm').validate({
			errorElement : 'span',
			errorClass : 'help-block help-block-error',
			focusInvalid : false,
			ignore : "",
			messages : {
				name : {
					required : "不能为空！",
					isExists : "用户名已存在"
				},
				phone : {
					required : "不能为空！",
					number : "请输入数字",
					phoneExists : "手机号已经注册"
				},
				password:{
					required : "不能为空！"
				},
				rpassword:{
					required : "不能为空！",
					rpass:"两次密码输入不符"
				}

			},
			rules : {
				name : {
					required : true,
					isExists : true
				},
				phone : {
					required : true,
					number : true,
					phoneExists : true
				},
				password:{
					required : true
				},
				rpassword:{
					required : true,
					rpass:true
				}
			},

			invalidHandler : function(event, validatorss) { //display error alert on form submit
			},

			highlight : function(element) { // hightlight error inputs
				$(element).closest('.form-group').addClass('has-error'); // set error class to the control group
			},

			unhighlight : function(element) { // revert the change done by hightlight
				$(element).closest('.form-group').removeClass('has-error'); // set error class to the control group
			},

			success : function(label) {
				label.closest('.form-group').removeClass('has-error'); // set success class to the control group
			}
		});
	}
</script>
</head>
<body>
	<div class="main-content-inner">
		<form id="addForm" action="#" class="form-horizontal">
			<div class="page-content">
				<div class="page-header">
					<h1>新增用户</h1>
				</div>
				<!-- /.page-header -->
				<div class="row">
					<div class="col-xs-12">
						<!-- PAGE CONTENT BEGINS -->
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1"> 用户名 </label>

							<div class="col-sm-9 ">
								<input type="text" maxlength="20" name="name" id="name" placeholder="请输入用户名"
									class="col-xs-10 col-sm-5">
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-1-1"> 手机号 </label>

							<div class="col-sm-9">
								<input type="text" maxlength="11" name="phone" id="phone" placeholder="请输入手机号"
									class="col-xs-10 col-sm-5">
							</div>
						</div>

						<div class="space-4"></div>

						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-2"> 密&nbsp;&nbsp;&nbsp;码 </label>

							<div class="col-sm-9">
								<input type="password" maxlength="20" id="password" name="password" placeholder="请输入密码"
									class="col-xs-10 col-sm-5">
							</div>
						</div>
						
						<div class="space-4"></div>

						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right"
								for="form-field-2"> 确认密码 </label>

							<div class="col-sm-9">
								<input type="password" maxlength="20" id="rpassword" name="rpassword" placeholder="请确认密码"
									class="col-xs-10 col-sm-5"> 
							</div>
						</div>

						<div class="space-4"></div>

						<div class="clearfix form-actions">
							<div class="col-md-offset-3 col-md-9">
								<button id="okBtn" class="btn btn-info" type="button">
									<i class="ace-icon fa fa-check bigger-110"></i> 提交
								</button>

								&nbsp; &nbsp; &nbsp;
								<button class="btn" type="reset">
									<i class="ace-icon fa fa-undo bigger-110"></i> 重置
								</button>
							</div>
						</div>

					</div>
				</div>
			</div>
		</form>
	</div>
</body>
</html>
